<template>
  <s-clean-layout navbar="none" title="我的" tabbar="/pages/index/user">
    <view class="page-container">
      <!-- 顶部状态栏占位 -->
      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
      
      <!-- 页面标题栏 -->
      <view class="nav-header">
        <text class="title">我的</text>
      </view>
      
      <!-- 用户信息卡片 -->
      <view class="user-card" @tap="handleUserCardTap">
        <view class="user-info">
          <image class="avatar" :src="
              isLogin
                ? sheep.$url.cdn(userInfo.avatar)
                : sheep.$url.static('/static/images/avatar.png')"
              mode="aspectFill" />
          <view class="info">
            <view class="name">{{ userInfo?.nickname || '请先登录' }}</view>
            <view class="vip" v-if="isLogin">
              <uni-icons type="star-filled" size="14" color="#FFD700"/>
              <text class="vip-text">你可以很少联系人，但是你不能联系不到人</text>
              <!-- <text class="expire">2024-12-31到期</text> -->
            </view>
            <view class="login-tip" v-else>
              <text>点击登录账号，体验更多功能</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 菜单列表 -->
      <view class="menu-card">
        <view class="menu-item" @tap="onMemorialTap">
          <view class="icon-wrap memorial">
            <uni-icons type="calendar" size="22" color="#B388FF"/>
          </view>
          <text class="title">纪念日管理</text>
          <uni-icons type="right" size="16" color="#999"/>
        </view>
        <view class="menu-item" @tap="onEventTap">
          <view class="icon-wrap event">
            <uni-icons type="list" size="22" color="#007AFF"/>
          </view>
          <text class="title">事件管理</text>
          <uni-icons type="right" size="16" color="#999"/>
        </view>
      </view>
      <view class="menu-divider-line"></view>
      <view class="menu-card">
        <view class="menu-item" @tap="onFeedbackTap">
          <view class="icon-wrap feedback">
            <uni-icons type="chat" size="22" color="#909399"/>
          </view>
          <text class="title">联系客服</text>
          <uni-icons type="right" size="16" color="#999"/>
        </view>
      </view>
      <view class="menu-divider-line"></view>
      <view class="menu-card">
        <view class="menu-item" @tap="onSettingTap">
          <view class="icon-wrap setting">
            <uni-icons type="gear" size="22" color="#909399"/>
          </view>
          <text class="title">设置</text>
          <uni-icons type="right" size="16" color="#999"/>
        </view>
      </view>
    </view>
  </s-clean-layout>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.status-bar {
  width: 100%;
  background: #f5f5f5;
}

.nav-header {
  position: relative;
  padding: 10rpx 30rpx;
  height: 88rpx;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }
}

.user-card {
  margin: 30rpx;
  padding: 40rpx 30rpx;
  background: linear-gradient(135deg, #3a8ee6, #5b8ff9);
  border-radius: 24rpx;
  
  .user-info {
    display: flex;
    align-items: center;
    
    .avatar {
      width: 88rpx;
      height: 88rpx;
      border-radius: 50%;
      border: 4rpx solid rgba(255, 255, 255, 0.2);
    }
    
    .info {
      margin-left: 24rpx;
      
      .name {
        font-size: 32rpx;
        color: #fff;
        font-weight: 500;
        margin-bottom: 10rpx;
      }
      
      .vip {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.1);
        padding: 4rpx 10rpx;
        border-radius: 20rpx;
        
        .vip-text {
          font-size: 22rpx;
          color: #FFD700;
          margin: 0 6rpx;
        }
        
        .expire {
          font-size: 22rpx;
          color: rgba(255, 255, 255, 0.8);
        }
      }
      
      .login-tip {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}

.menu-divider-line {
  width: 100%;
  height: 18rpx;
  background: #f5f6fa;
  margin: 0;
  border: none;
}

.menu-card {
  margin: 0 30rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  
  .menu-item {
    display: flex;
    align-items: center;
    padding: 28rpx 30rpx;
    
    &:not(:last-child) {
      border-bottom: 1rpx solid #f5f5f5;
    }
    
    .icon-wrap {
      width: 72rpx;
      height: 72rpx;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      
      &.vip {
        background: #FFF9E6;
      }
      
      &.auth {
        background: #E6F3FF;
      }
      
      &.import {
        background: #E6FFE9;
      }
      
      &.feedback {
        background: #F4F4F5;
      }
      
      &.setting {
        background: #F4F4F5;
      }
      &.memorial {
        background: #E6E9FF;
      }
      &.event {
        background: #E6F3FF;
      }
    }
    
    .title {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
    
    .right {
      display: flex;
      align-items: center;
      
      .status {
        font-size: 26rpx;
        color: #999;
        margin-right: 8rpx;
      }
    }
  }
  .menu-divider {
    height: 32rpx;
    background: transparent;
  }
}
</style>

<script setup>
import { computed, ref, onMounted } from 'vue'
import sheep from '@/sheep'
import { showAuthModal } from '@/sheep/hooks/useModal'

// 获取状态栏高度
const statusBarHeight = ref(0)
uni.getSystemInfo({
  success: (res) => {
    statusBarHeight.value = res.statusBarHeight || 0
  }
})

// 使用与 s-user-card 相同的方式获取用户信息和登录状态
const userInfo = computed(() => sheep.$store('user').userInfo)
const isLogin = computed(() => sheep.$store('user').isLogin)

// 处理用户卡片点击
const handleUserCardTap = () => {
  if (!isLogin.value) {
    // 未登录时，显示登录弹窗，指定为 'accountLogin' 类型
    showAuthModal('accountLogin')
  } else {
    // 已登录时，可以跳转到用户详情页
    sheep.$router.go('/pages/user/info')
  }
}

// 菜单点击事件
const onVipTap = () => {
  if (!isLogin.value) {
    showAuthModal('accountLogin')
    return
  }
  uni.navigateTo({ url: '/pages/user/vip' })
}

const onAuthTap = () => {
  if (!isLogin.value) {
    showAuthModal('accountLogin')
    return
  }
  sheep.$helper.toast('功能开发中，敬请期待')
}

const onImportTap = () => {
  if (!isLogin.value) {
    showAuthModal('accountLogin')
    return
  }
  sheep.$helper.toast('功能开发中，敬请期待')
}

const onFeedbackTap = () => {
  // 跳转到客服页面
  uni.navigateTo({ url: '/pages/chat/index' })
}

const onSettingTap = () => {
  uni.navigateTo({ url: '/pages/public/setting' })
}

const onMemorialTap = () => {
  uni.navigateTo({ url: '/pages/contact/memorial-list' })
}
const onEventTap = () => {
  uni.navigateTo({ url: '/pages/contact/event-list' })
}


</script>
